// console.log(lrc);
/**
 * 解析歌词字符串，得到一个歌词对象的数组  
 * @return {Array} 歌词对象数组
 */
function parseLrc() {
  const lines = lrc.split('\n')
  const lcrList = []
  for (let i = 0; i < lines.length; i++) {
    const line = lines[i]
    const parts = line.split(']')
    const time = parts[0].substring(1)
    const obj = {
      time: parseTime(time),
      text: parts[1]
    }
    lcrList.push(obj)
  }
  return lcrList
}

/** 
 * 将时间字符串解析成秒数
 * @param {String} timeStr 时间字符串，格式为 [mm:ss.SS]
 * @returns
 */
function parseTime(timeStr) {
  var parts = timeStr.split(':')
  return +parts[0] * 60 + +parts[1];
}

const lcrData = parseLrc()

/**
 * 获取dom
 */
var doms = {
  audio: document.querySelector('audio'),
  ul: document.querySelector('.lcr-list'),
  container: document.querySelector('.container'),
  lis: document.querySelectorAll('.lcr-list li')
}

/**
 * 计算出，当前情况
 * lcrData高亮下标
 */
function findIndex() {
  const currentTime = doms.audio.currentTime; //当前播放时间
  for (let i = 0; i < lcrData.length; i++) {
    if (currentTime < lcrData[i].time) {
      return i - 1;
    }
  }
  //找遍了都没找到（说明结束）
  return lcrData.length - 1;

}

/**
 * 创建歌词元素
 */
function createLrcElements() {
  const flag = document.createDocumentFragment(); // 创建一个文档片段 
  for (let i = 0; i < lcrData.length; i++) {
    const li = document.createElement('li')
    li.innerText = lcrData[i].text;
    flag.appendChild(li)
  }
  doms.ul.appendChild(flag) //一次性赋值 防止页面重绘
}
createLrcElements()

//容器高度
var containerHeight = doms.container.clientHeight;
var liHeight = doms.ul.children[0].clientHeight;
const maxOffset = doms.ul.clientHeight - containerHeight;

/**
 * 计算偏移量
 */
function setOffset() {
  const index = findIndex();
  const h1 = liHeight * index + liHeight / 2;
  const h2 = containerHeight / 2;
  let offSetY = h1 - h2;
  if (offSetY <= 0) {
    offSetY = 0;
  }
  if (offSetY >= maxOffset) {
    offSetY = maxOffset
  }
  doms.ul.style.transform = `translateY(-${offSetY}px)`

  //添加之前去除以前的
  let li = document.querySelector('li.active')
  if (li) {
    li.classList.remove('active')
  }

  li = doms.ul.children[index];
  if (li) {
    li.classList.add('active')
  }
}


//  监听播放时间
doms.audio.addEventListener('timeupdate', setOffset)

